<!-- 隐私弹出窗口 -->
<template>
  <view  class="">
			<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
    <view class="privacy-dialog">
      <text class="title">隐私保护提示</text>
      <scroll-view scroll-y style="max-height: 400rpx;">
        <text class="content">
          欢迎使用好一购！为了保障您的合法权益，请您阅读并同意我们的
          《隐私协议》和《用户协议》。我们将依据相关协议收集、使用和保护您的信息。
        </text>
      </scroll-view>
      <view class="link-wrap">
        <text class="link" @click="goTo('/pages/privacy')">查看《隐私协议》</text>
        <text class="link" @click="goTo('/pages/agreement')">查看《用户协议》</text>
      </view>
      <view class="btns">
        <button type="default" @click="refuse">拒绝</button>
        <button type="primary" @click="accept">同意</button>
      </view>
    </view></uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const visible = ref(false);

onMounted(() => {
  const accepted = uni.getStorageSync('privacyAccepted');
  if (!accepted) {
    // visible.value = true;
				this.$refs.popup.open("bottom")
  }
});

function accept() {
  uni.setStorageSync('privacyAccepted', fasle);
  // visible.value = false;
}

function refuse() {
  uni.showModal({
    title: '提示',
    content: '您必须同意相关协议才能继续使用应用。',
    showCancel: false
  });
}

function goTo(url) {
  uni.navigateTo({ url });
}
</script>

<style scoped>
.privacy-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.privacy-dialog {
  width: 80%;
  background: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  text-align: center;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
}
.content {
  font-size: 28rpx;
  line-height: 1.6;
}
.link-wrap {
  margin: 20rpx 0;
}
.link {
  color: #007aff;
  margin: 0 20rpx;
  font-size: 26rpx;
}
.btns {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}
</style>
